<template>
    <div class="circle-item-box">
        <div class="order-list" v-if="circleList.length >= 1" v-for="(item, index) in circleList" :key="index" >
            <div  @click="checkOrder(item)">
                <p class="order-status" v-if="item.status == 3">交易成功</p>
                <p class="order-status" v-if="item.status == 2">已发货</p>
                <p class="order-status" v-if="item.status == 1">待发货</p>
                <div class="circle-item">
                    <img :src="item.imgUrl" alt="">
                    <div class="circle-item-intro">
                        <h3>{{item.cardName}}</h3>
                        <span class="circle-item-price">¥{{item.presentPrice}}</span>
                        <p>数量：<span>{{item.buyNum}}</span></p>
                    </div>
                </div>  
            </div>
          <div class="order-get" v-if="item.type == 3">
              <div class="order-btn" @click="showDialog=true">确认收货</div>
          </div>
      </div>
        <div class="no-circle-box" v-if="circleList.length < 1">
            <img src="@/assets/img/no-data-show.png" alt="">
            <p>暂无数据</p>
        </div>
        <com-dialog :dialogConent="dialogConent" @rightBtn="rightBtn" v-if="showDialog" @leftBtn="leftBtn"></com-dialog>
    </div>
</template>
<script>
import comDialog from '@/components/comDialog'
export default {
    props: ['circleList'],
    data () {
        return {
            showDialog: false,
            dialogConent: {
                title: '是否确认已收到商品？',
                left: '取消',
                right: '确认'
            }
        }
    },
    components: {
       comDialog 
    },
    mounted () {
    },
    methods: {
        leftBtn() {
            this.showDialog = false
        },
        rightBtn() {
            this.showDialog = false
        },
        checkOrder(item){
            this.$router.push({
                name: 'orderInfo', 
                params: item
            })
        }
    }
}
</script>

<style lang="less" scoped>
    .circle-item-box {
        background: #efefef;
        min-height: 13.34rem;
      }
      .order-list{
           margin-bottom: .16rem;
      }
    .order-get{
        border-top: 1px solid #cccccc;
        height: .8rem;
        background: #fff;
        padding: .0rem .3rem;
        .order-btn{
            width: 1.40rem;
            height: .52rem;
            border: 1px solid #cccccc;
            border-radius: 2px;
            line-height: .52rem;
            color: #707070;
            font-size: .26rem;
            float: right;
            text-align: center;
            margin-top: .12rem;
        }
    }
    .order-status{
        height: .76rem;
        padding: 0rem .3rem;
        text-align: right;
        font-size: .26rem;
        color: #29abae;
        line-height: .76rem;
        background: #fff;
    }
    .circle-item {
        padding:0.3rem;
        background: #fff;
        img {
            width: 1.5rem;
            height: 1.5rem;
            float: left;
        }
        .circle-item-intro {
            margin-left: 1.8rem;
            color: #282828;
            font-size: 0;
            h3 {
                font-size: 0.32rem;
                font-weight: normal;
            }
            p {
                font-size: 0.26rem;
                margin-top: 0.2rem;
                a {
                    color: #282828;
                    float: right;
                    &::after {
                        content: '';
                        display: inline-block;
                        width: 0.12rem;
                        height: 0.2rem;
                        background: url(../../../assets/img/next-icon.png) no-repeat;
                        background-size: 100%;
                        margin-left: 0.15rem;
                    }
                }
            }
            .circle-item-price {
                color: #ff2d41;
                font-size: 0.26rem;
                display: inline-block;
                margin-top: 0.15rem;
            }
        }
    }
    .no-circle-box {
        text-align: center;
        font-size: 0;
        img {
            width: 3.43rem;
            margin-top: 1.2rem;
        }
        p {
            color: #282828;
            font-size: 0.3rem;
            margin-top: 0.7rem;
        }
    }
</style>
